<template>
    <div class="gn-zfl">
                    <div class="gn-zhd">
                        <div class="gn-zhtx clearfix">
                            <div class="dinfo clearfix">
                                <a href="" class="tmtx-wrap">
                                    <img :src="'/img/'+arr[0].himg" alt="" class="mrtx">
                                    <div class="bianjiziliao">
                                       <span> 编辑资料</span>
                                    </div>
                                </a>
                                <div>
                                    <a href="javascript:;" class="yhming">{{arr[0].uname}}</a>
                                </div>
                                <div class="prestige">
                                    <img src="../assets/img/ys/xinlangs.png" alt="">
                                </div>
                            </div>
                            <ul class="xiaodhs clearfix">
                                <li><a href="" class="tiaoshouhuo">我的收货地址</a></li>
                                <li><span class="yhxx">我的优惠信息</span></li>
                                <li>
                                    <span class="zhifubaowrap">
                                        <span class="asdd">
                                            <a href="" class="shenmeo"></a>
                                        </span>
                                        <a href="" class="zhifubao">我的支付宝</a>
                                    </span>
                                </li>
                            </ul>
                        </div>
                        <div class="contwraps">
                            <ul class="clearfix">
                                <li><a href="javascript:;" class="luanxieba"><span>待付款</span></a></li>
                                <li><a href="javascript:;" class="luanxieba"><span>待发货</span></a></li>
                                <li><a href="javascript:;" class="luanxieba"><span>待收货</span></a></li>
                                <li><a href="javascript:;" class="luanxieba"><span>待评价</span></a></li>
                                <li><a href="javascript:;" class="luanxieba"><span>退款</span></a></li>
                            </ul>
                        </div>
                        <div class="cailiulanwrap">
                            <div class="cailiulan">
                                根据浏览，猜我喜欢
                                <a href="javascript:;" class="huanyihuan clearfix" @click="huan">
                                    <i class="zqs1 fl"></i>
                                   <span class="fl">换一组</span>
                                </a>
                            </div>
                            <div class="cll">
                                <div class="s-conts">
                                    <ul class="clearfix pd">
                                        <li v-for="(item,key) in sarr" :key="key">
                                            <div class="sitemwrap">
                                                <div class="s-pic1">
                                                    <a href="" class="s-pic-link">
                                                        <img :src="'/img/'+imgwrap[key][0]" alt="" class="spicimg">
                                                    </a>
                                                </div>
                                                <div class="s-pricebox">
                                                    <span class="spricess">
                                                        <em class="s-price-single">￥</em><em class="spricev">{{item.money}}</em>
                                                    </span>
                                                </div>
                                                <div class="stitle1">
                                                    <a href="" class="stname"><span v-for="(items,keys) in mswrap[key]" :key="keys">{{items}}&nbsp;</span></a>
                                                </div>
                                                <div class="sextra1">
                                                    <span class="syuexiao">销量：<span>{{item.sell}}</span></span>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
</template>
<script>
export default {
    data(){
        return{
            arr:"",
            sarr:"",
            img:"",
            imgwrap:[],
            ms:"",
            mswrap:[]
        }
    },
    methods:{
        huan(){
            axios.post("/api/chachacha").then((data)=>{
            if(data.data){
                this.sarr=""
                this.imgwrap=[]
                this.mswrap=[]
                var _this=this
                this.sarr=data.data
                for(var i=0;i<data.data.length;i++){
                    _this.img=data.data[i].img.split(',')
                    _this.ms=data.data[i].miaoshutag.split(',')
                    _this.imgwrap.push(_this.img)
                    _this.mswrap.push(_this.ms)
                    _this.img=''
                    _this.ms=''
                }
            }else{

            }
        })
        }
    },
    created(){
        axios.get("/api/").then((data)=>{
            if(data.data){
                this.uname=data.data
            }else{
                this.$router.push("/login")
            }
        })
        axios.post("/api/grindex").then((data)=>{
            if(data.data){
                this.arr=data.data
                console.log(this.arr)
            }else{
                 this.$toast({
                    message:"数据异常",
                    duration:1000
                })
                this.$router.push("/")
            }
        })
        axios.post("/api/chachacha").then((data)=>{
            if(data.data){
                var _this=this
                this.sarr=data.data
                for(var i=0;i<data.data.length;i++){
                    _this.img=data.data[i].img.split(',')
                    _this.ms=data.data[i].miaoshutag.split(',')
                    _this.imgwrap.push(_this.img)
                    _this.mswrap.push(_this.ms)
                    _this.img=''
                    _this.ms=''
                }
            }else{

            }
        })
    }
}
</script>

<style scoped>
*{
    box-sizing: content-box;
}
.yhming{
    color: #4b4b4b;
}
.yhming:hover{
    color: #f40;
}
    .pd{
        padding-left: 0;
    }
    .gn-zhd{
        border: 1px solid #e4eaee;
        margin-bottom: 23px;
        font-size: 12px;
        color: #4b4b4b;
        position: relative;
        z-index: 3;
    }
    .gn-zhtx{
        padding: 5px 0;
        position: relative;
        padding-top: 10px;
        font-size:12px;
        font-family: tahoma,arial,'Hiragino Sans GB','Microsoft YaHei',\5b8b\4f53,sans-serif;
        vertical-align: middle;
        color: #546d7e;
        background: #f5f8fa;
        border-bottom: 1px solid #e4eaee;
        line-height: 23px;
    }
    .dinfo{
        float: left;
        width:200px;
    }
    .tmtx-wrap{
        float: left;
        display: block;
        width: 52px;
        height: 52px;
        margin-right: 13px;
        margin-left: 12px;
        position: relative;
        border: 2px solid #FFF;
        border-radius: 50%;
        overflow: hidden;
    }
    .tmtx-wrap:hover .bianjiziliao{
        display: block;
    }
    .bianjiziliao{
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        background: #000;
        color: #fff;
        opacity: .6;
        border-radius: 50%;
        line-height: 50px;
       
        /* padding-top: 23px; */
    }
    .bianjiziliao span{
    }
    .mrtx{
        border-radius: 50%;
        width: 100%;
        height: 100%;
    }
    .prestige{
        margin-left: 80px;
        margin-top: 3px
    }
    .xiaodhs{
        float: right;
        width: 61%;
        margin-right: -1px;
        margin-top: 9px;
    }
    .xiaodhs>li{
        width: 33%;
        display: inline;
        float: left;
    }
    .tiaoshouhuo{
        zoom: 1;
        cursor: pointer;
        position: relative;
        z-index: 2;
        display: block;
        padding: 10px 0;
        color: #546d7e;
        text-align: center;
    }
    .yhxx{
        zoom: 1;
        cursor: pointer;
        position: relative;
        z-index: 2;
        display: block;
        padding: 10px 0;
        color: #546d7e;
        text-align: center;
    }
    .zhifubaowrap{
        zoom: 1;
        cursor: pointer;
        position: relative;
        z-index: 2;
        display: block;
        padding: 10px 0;
        color: #546d7e;
        text-align: center;
    }
    .asdd{
        vertical-align: top;
        width: 16px;
        height: 16px;
        display: inline-block;
        position: relative;
        z-index: 4;
        top: -1px;
    }
    .shenmeo{
        vertical-align: top;
        display: block;
        width: 16px;
        height: 13px;
        position: absolute;
        top: 5px;
        left: 0;
        background: url("../assets/img/ys/666.png") no-repeat;
        background-position: -28px -557px;
    }
    .zhifubao{
        color: #000;
    }
    .contwraps{
        overflow: hidden;
    }
    .contwraps ul{
        height: 52px;
        overflow: hidden;
    }
    .contwraps ul li{
        width: 20%;
        float: left;
    }
    .cailiulan{
        font-family: tahoma,arial,'Hiragino Sans GB','Microsoft YaHei',\5b8b\4f53,sans-serif;
        color: #fff;
        background: #a0cdeb;
        border: #a0cdeb;
        border-top: #e4eaee;
        font-size: 18px;
        line-height: 18px;
        padding: 11px 10px;
        position: relative;
    }
    .huanyihuan{
        position: absolute;
        right: 10px;
        top: 10px;
        padding: 3px 12px;
        margin-top: -3px;
        height: 20px;
        background: #fff;
        font-size: 14px;
        line-height: 20px;
        color: #4b4b4b;
        
    }
    .zqs1{
        display: inline-block;
        width: 20px;
        height: 20px;
        background: url("../assets/img/ys/zhuanquan.png");
        transition: .2s;
    }
    .huanyihuan:hover .zqs1{
        transform: rotate(180deg)
    }
    .cll{
        border: 1px solid #e4eaee;
        border-top: 0;
        background-color: #f5f8fa;
        padding: 26px 0 0;
        font-size: 14px;
        color: #4b4b4b;
    }
    .s-cons{
        margin: 0 8px;
    }
    .sitemwrap{
        position: relative;
        margin: 0 10px 20px;
        width: 218px;
        height: 313px;
        float: left;
        background: #fff;
        border: 1px solid #e4eaee;
        color: #595959;
    }
    .s-pic1{
        width: 218px;
        height: 218px;
        overflow: hidden;
        position: relative;
    }
    .s-pic-link{
        vertical-align: middle;
        display: table-cell;
        width: 218px;
        height: 218px;
        overflow: hidden;
        text-align: center;
    }
    .spicimg{
        width: 100%;
        height: 100%;
        vertical-align: middle;
    }
    .s-pricebox{
        height: 16px;
        overflow: hidden;
        margin: 13px 12px 12px 16px;
        line-height: 16px;
    }
    .spricess{
        font-size: 16px;
        vertical-align: bottom;
    }
    .s-price-single{
        font-family: Arial;
        margin-right: 4px;
        color: #f40;
    }
    .spricev{
        font-family: Verdana;
        font-weight: 700;
        color: #f40;
    }
    .stitle1{
        font-size: 12px;
        overflow: hidden;
        margin: 0 12px 0 16px;
        height: 14px;
        line-height: 1;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .stname{
        color: #000;
    }
    .sextra1{
        font-size: 12px;
        margin: 0 16px;
        height: 16px;
        line-height: 16px;
        margin-top: 12px;
        color: #9c9c9c;
        overflow: hidden;
    }
    .syuexiao{
        float: right;
        font-size: 12px;
        line-height: 16px;
        color: #9c9c9c
    }
    .luanxieba{
        zoom: 1;
        padding: 17px 0;
        vertical-align: middle;
        display: block;
        color: #4b4b4b;
        text-align: center;
    }
    .luanxieba span{
        margin-left: -1px;
        height: 18px;
        line-height: 18px;
        display: block;
        border-left: 1px solid #e4eaee;
    }
</style>
